import { styled } from '@mui/material/styles';
import { Button } from '@mui/material';

const StyledButton = styled(Button)(({ theme }) => {
  const isDark = theme.palette.mode === 'dark';

  return {
    position: 'relative',
    overflow: 'hidden',
    borderRadius: '20px',
    padding: '10px 24px',
    fontSize: '1rem',
    fontWeight: 600,
    textTransform: 'none',
    color: isDark ? '#ffffff' : '#000000',
    // Direct background with solid base + gradient overlay
    background: isDark 
      ? `linear-gradient(145deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.9) 100%), 
         linear-gradient(145deg, rgba(0,255,242,0.15), rgba(0,255,242,0.05))`
      : `linear-gradient(145deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.9) 100%), 
         linear-gradient(145deg, rgba(0,255,242,0.15), rgba(0,255,242,0.05))`,
    boxShadow: '0 0 10px rgba(0,255,242,0.25), 0 0 20px rgba(0,255,242,0.1)',
    backdropFilter: 'blur(12px)',
    WebkitBackdropFilter: 'blur(12px)',
    transition: 'all 0.3s ease',
    zIndex: 1,

    // Removed the problematic pseudo element

    '&:hover': {
      color: '#00fff2',
      textShadow: '0 0 8px #00fff2',
      boxShadow: '0 0 16px #00fff2, 0 0 24px rgba(0,255,242,0.5)',
    },

    '&:focus': {
      color: '#00fff2',
      textShadow: '0 0 8px #00fff2',
    }
  };
});

export default StyledButton;